<!--  -->
<template>
  <div class="goods-search">
    <!-- 头部 -->
    <van-nav-bar title="商品搜索" fixed :z-index="100" @click-left="onBack">
      <template #left>
        <van-icon name="arrow-left" size="20" color="#fff" />
      </template>
    </van-nav-bar>
    <!-- 头部搜索框 -->
    <div class="search">
      <div class="search-box">
        <van-icon name="search" size="20" />
        <input
          type="text"
          placeholder="搜索商品"
          v-model="searchWords"
          ref="searchInput"
        />
      </div>
      <div class="cancel-search" v-if="searchWords" @click="cancelSearch">
        取消
      </div>
    </div>
    <!-- 联想词 -->
    <div class="association">
      <ul>
        <li
          v-for="item in searchList"
          :key="item.goods_id"
          @click="toGoodDetail(item.goods_id)"
        >
          <van-icon name="search" size="20"></van-icon>
          <span>{{ item.goods_name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getSearch } from "@/network/front/api";
import { NavBar, Icon } from "vant";
export default {
  data() {
    return {
      searchWords: "",
      searchList: [],
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    let that = this;
    this.$refs.searchInput.oninput = function () {
      setTimeout(() => {
        that.searchByKeyWords();
      }, 333);
    };
  },
  methods: {
    //返回上一页
    onBack() {
      this.$router.back();
    },
    // 取消搜索
    cancelSearch() {
      this.searchWords = "";
      this.searchList = [];
    },
    //根据关键词搜索
    async searchByKeyWords() {
      const res = await getSearch({
        url: "/goods/qsearch?query=" + this.searchWords,
      });
      if (res.message && res.message.length) {
        this.searchList = res.message;
      } else {
        this.searchList = [
          {
            goods_id: 404,
            goods_name: "暂无搜索到任何数据",
          },
        ];
      }
    },
    //去商品详情页
    toGoodDetail(id) {
      if (id !== 404) {
        this.$router.push({ name: "Detail", params: { id } });
      }
    },
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.goods-search {
  padding-top: 46px;
}
.goods-search >>> .van-nav-bar__content {
  background-color: #ff734c;
}
.goods-search >>> .van-nav-bar__title {
  color: #fff;
}
.search {
  display: flex;
  padding: 12px;
}
.search-box {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 4px 0;
  border: 1px solid #ccc;
}
.search-box .van-icon {
  margin: 0 4px;
}
.search-box input {
  flex: 1;
}
.cancel-search {
  padding: 0.12rem 0.21333rem;
  margin-left: 0.26667rem;
  color: #fff;
  background-color: #ff6a00;
}
.association ul {
  padding: 0 10px;
}
.association ul li {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.association ul li span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-left: 12px;
}
</style>